<template>
  <ParentTab :activeTab="activeParentTab" @changeTab="changeParentTab" />
  <div class="ranking page">
    <ChildrenTab :activeTab="activeChildTab" @changeTab="changeChildTab" />
    <div v-show="activeChildTab === 3">
      <Historia />
    </div>
    <div v-show="activeChildTab !== 3">
      <User
        :activeParentTab="activeParentTab"
        :activeChildTab="activeChildTab"
      />
      <Money
        :activeParentTab="activeParentTab"
        :activeChildTab="activeChildTab"
      />
      <Topthree
        :activeParentTab="activeParentTab"
        :activeChildTab="activeChildTab"
      />
    </div>
    <List :activeParentTab="activeParentTab" :activeChildTab="activeChildTab" />
    <div style="height: 2.5rem"></div>
  </div>
</template>

<script setup lang="ts">
import ParentTab from "./components/ParentTab.vue";
import ChildrenTab from "./components/ChildrenTab.vue";
import User from "./components/User.vue";
import Money from "./components/Money.vue";
import Topthree from "./components/Topthree.vue";
import List from "./components/List.vue";
import Historia from "./components/Historia.vue";

const activeParentTab = ref(1);
const changeParentTab = (tab: number) => {
  activeParentTab.value = tab;
};

const activeChildTab = ref(1);
const changeChildTab = (tab: number) => {
  activeChildTab.value = tab;
};
</script>

<style scoped lang="scss">
.ranking {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: var(--app-bg-color);
  color: var(--theme-neutral1);
  overflow-x: hidden;
  padding-top: 1.4rem;
}
</style>
